<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            border: 1px black solid
        }
    </style>
</head>
<body>
<div>
    <table id="table1" style="border: 1px black solid;width: 60%;margin: 0  auto;"  >
        <tr>
            <td>选择</td>
            <td>序号</td>
            <td>姓名</td>
            <td>绰号</td>
        </tr>
        <tr>
            <td><input type="radio" name="hero"></td>
            <td>1</td>
            <td>武松</td>
            <td>行者</td>
        </tr>
        <tr>
            <td><input type="radio" name="hero"></td>
            <td>2</td>
            <td>宋江</td>
            <td>智多星</td>
        </tr>
    </table>


    <div style="text-align: center;">
        姓名：<input type="text" class="name">
        绰号：<input type="text" class="f_name"><br>
        <button class="add">添加</button>
        <button class="del">删除</button>
    </div>

</div>
<script>
    const add=document.querySelector('.add')
    const del=document.querySelector('.del')
    const table=document.querySelector('table')
    const name=document.querySelector('.name')
    const f_name=document.querySelector('.f_name')
    let all=document.getElementsByName('hero')
    let index=document.querySelectorAll('tr').length-1;
    add.addEventListener('click',function (){
        console.log(name.value)
        if (name.value!=''&&f_name.value!=''){
            let new_input=document.createElement('input')
            let new_td2=document.createElement('td')
            let new_td3=document.createElement('td')
            let new_td4=document.createElement('td')
            let new_tr=document.createElement('tr')
            let new_td1=document.createElement('td')
            new_td2.innerHTML=++index;
            new_td2.name='num'
            new_input.type='radio'
            new_input.name='hero'
            new_td3.innerHTML=name.value
            new_td4.innerHTML=f_name.value
            new_td1.appendChild(new_input)
            new_tr.appendChild(new_td1)
            new_tr.appendChild(new_td2)
            new_tr.appendChild(new_td3)
            new_tr.appendChild(new_td4)
            table.appendChild(new_tr)
            name.value=''
            f_name.value=''
            for (let i = 0; i < all.length; i++) {
                console.log( all[i].parentNode.parentNode.querySelector('td:nth-child(2)'))
                all[i].parentNode.parentNode.querySelector('td:nth-child(2)').innerHTML=i+1

                }

        }
        else {
            alert('输入为空！')
        }


    })
    del.addEventListener('click',function (){
        let all=document.getElementsByName('hero')
        for (let i = 0; i < all.length; i++) {
            if (all[i].checked===true){
                table.removeChild(all[i].parentNode.parentNode)
            }
        }
        for (let i = 0; i < all.length; i++) {
            console.log( all[i].parentNode.parentNode.querySelector('td:nth-child(2)'))
            all[i].parentNode.parentNode.querySelector('td:nth-child(2)').innerHTML=i+1

        }
    })
</script>
</body>
</html>
